/**
 * Created by xiangjiayu on 2017/6/26.
 * 新增订单
 */

import React from 'react';
import {
    Anchor,
    Button,
    Card,
    Checkbox,
    Col,
    DatePicker,
    Form,
    Icon,
    Input,
    Modal,
    Popconfirm,
    Progress,
    Radio,
    Row,
    Select,
    Table,
    Tooltip,
    Upload,
    Switch
} from 'antd';
import AddressSelect from '../../components/common/AddressSelect/AddressSelect'; //省市级联
import CheckBox from 'CheckBox'; //自定义 多选框
import Immutable from 'immutable';


const ButtonGroup = Button.Group;       //组合按钮
const Option = Select.Option;           //下拉框
const FormItem = Form.Item;
const {MonthPicker, RangePicker} = DatePicker;//日历
const {Link} = Anchor;
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;

const formItemLayout = {
  labelCol: {
    sm: {span: 3},
  },
  wrapperCol: {
    sm: {span: 5},
  },
};


export default class AuntAdd extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isShowCuser: false,//雇主其他信息展开状态
      //弹窗
      ModalOrderSource: false,         //管理订单来源
      ModalEdit: false,
      Modalvideo: false,
      value: this.props.value,
      editable: this.props.editable || false,
      //上传图片
      previewVisible: false,
      previewImage: '',
      fileList: [{
        uid: -1,
        name: 'xxx.png',
        status: 'done',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      }],
      valueRadio: 1,
    };
  }

  //雇主其他信息展开状态
  CuserContSlide = (e) => {
    this.setState({
      'isShowCuser': !this.state.isShowCuser,
    })
  }
  //弹窗
  //管理订单来源
  showModalOrderSource(ModalOrderSource) {
    this.setState({ModalOrderSource});
  }

  showModalvideo(Modalvideo) {
    this.setState({Modalvideo});
  }
  showModalEdit(ModalEdit) {
    this.setState({ModalEdit});
  }


  // 上传图片
  handleCancel = () => this.setState({previewVisible: false})
  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  }
  handleChange = ({fileList}) => this.setState({fileList})
  //锚点
  scrollToAnchor = (anchorName) => {
    if (anchorName) {
      let anchorElement = document.getElementById(anchorName);
      if (anchorElement) {
        anchorElement.scrollIntoView();
      }
    }
  }
  onChangeRadio = (e) => {
    this.setState({
      value: e.target.valueRadio,
    });
  }

  render() {
    const {value, editable} = this.state;
    let data_sex = [
      {
        text: '男',
        state: true,
        type: 'radio'
      }, {
        text: '女',
        state: '',
        type: 'radio'
      }
    ];
    let data_age = [
      {
        text: '7个月以下',
        state: true,
        type: 'radio'
      }, {
        text: '7-12个月',
        state: '',
        type: 'radio'
      }, {
        text: '13-24个月',
        state: '',
        type: 'radio'
      }, {
        text: '24个月以上',
        state: '',
        type: 'radio'
      }
    ];
    let data_zhujia = [
      {
        text: '住家',
        state: true,
        type: 'radio'
      }, {
        text: '不住家',
        state: '',
        type: 'radio'
      }, {
        text: '不限',
        state: '',
        type: 'radio'
      }
    ];
    let data_skill = [
      {
        text: '做辅食',
        state: true
      }, {
        text: '早教',
        state: ''
      }, {
        text: '唱儿歌',
        state: ''
      }, {
        text: '室外活动',
        state: ''
      }, {
        text: '辅导班接送',
        state: ''
      }
    ];

    //雇主其他信息
    let data_children = [
      {
        text: '无',
        state: true,
        type: 'radio'
      }, {
        text: '有',
        state: '',
        type: 'radio'
      }
    ];
    let data_oldpeople = [
      {
        text: '无',
        state: true,
        type: 'radio'
      }, {
        text: '有',
        state: '',
        type: 'radio'
      }
    ];
    let data_food = [
      {
        text: '偏甜',
        state: true,
      }, {
        text: '偏辣',
        state: '',
      }, {
        text: '偏咸',
        state: '',
      }, {
        text: '清淡',
        state: '',
      }
    ];
    let data_food2 = [
      {
        text: '偏甜',
        state: true,
      }, {
        text: '偏辣',
        state: '',
      }, {
        text: '偏咸',
        state: '',
      }, {
        text: '清淡',
        state: '',
      }, {
        text: '清淡',
        state: '',
      }, {
        text: '清淡',
        state: '',
      }, {
        text: '清淡',
        state: '',
      }, {
        text: '清淡',
        state: '',
      }
    ];
    let data_pet = [
      {
        text: '无',
        state: true,
      }, {
        text: '猫',
        state: '',
      }, {
        text: '小型犬',
        state: '',
      }, {
        text: '大型犬',
        state: '',
      }
    ];
    let data_leixing = [
      {
        text: '选择项',
        state: true,
      }, {
        text: '输入框',
        state: '',
      }, {
        text: '文本框',
        state: '',
      }
    ];

    //订单来源
    //let dataOrderSource = data.AuntAddTable;
    const dataOrderSource = [
      {
        key: '1',
        name: '胡彦斌'
      }, {
        key: '2',
        name: '胡彦祖',
      }
    ];
    const columns = [
      {
        title: '来源名称',
        dataIndex: 'name',
        width: '70%'
      }, {
        title: '操作',
        dataIndex: 'operation',
        width: '30%',
        render: () => {
          return (
            <div className="table-a-cont">
              <a href="javascript:void(0)">编辑</a>
              <Popconfirm placement="topRight" title="确定删除?">
                <a href="javascript:void(0)" className="col-red">删除</a>
              </Popconfirm>
            </div>
          )
        },
        className: 'ant-table-th-center'
      }
    ];
    const {previewVisible, previewImage, fileList} = this.state;
    const uploadButton = (
      <div>
        <Icon type="upload"/>
        <div className="ant-upload-text">上传</div>
      </div>
    );
    const plainOptions = ['Apple', 'Pear', 'Orange'];

    const dataSource_qy = [
      {
        key: '1',
        name:
            <div className="shejia-address">
              <div className="shejia-address-left"><span className="name">南京</span></div>
              <div className="add-cont">
                <Row gutter={16}>
                  <Col span={6}>
                    <Input size="large" addonBefore="江" addonAfter="元" defaultValue="100" />
                  </Col>
                  <Col span={6}>
                    <Input size="large" addonBefore="江宁" addonAfter="元" defaultValue="100" />
                  </Col>
                  <Col span={6}>
                    <Input size="large" addonBefore="江宁江" addonAfter="元" defaultValue="100" />
                  </Col>
                  <Col span={6}>
                    <Input size="large" addonBefore="江宁江宁店" addonAfter="元" defaultValue="100" />
                  </Col>
                  <Col span={6}>
                    <Input size="large" addonBefore="江宁江宁店" addonAfter="元" defaultValue="100" />
                  </Col>
                  <Col span={6}>
                    <Input size="large" addonBefore="江宁江宁店" addonAfter="元" defaultValue="100" />
                  </Col>
                </Row>
              </div>
          </div>,
      }, {
        key: '2',
        name:
          <div className="shejia-address">
            <div className="shejia-address-left"><span className="name">南京</span></div>
            <div className="add-cont">
              <Row gutter={16}>
                <Col span={6}>
                  <Input size="large"
                         addonBefore={
                           <Tooltip placement="topLeft" title="江宁店江宁店江宁店江宁店江宁店江宁店江宁店">
                             <span>江宁江宁店</span>
                           </Tooltip>
                         }
                         addonAfter="元" defaultValue="100" />
                </Col>
              </Row>
            </div>
          </div>,
      }
    ];
    const dataSource_qy2 = [
      {
        key: '1',
        name:
          <div className="shejia-address">
            <div className="shejia-address-left"><span className="name">南京</span></div>
            <div className="add-cont">
              <Row gutter={16}>
                <Col span={8}>
                  <Input size="large" addonBefore="江" addonAfter="元" defaultValue="100" />
                </Col>
                <Col span={8}>
                  <Input size="large" addonBefore="江宁" addonAfter="元" defaultValue="100" />
                </Col>
                <Col span={8}>
                  <Input size="large" addonBefore="江宁江" addonAfter="元" defaultValue="100" />
                </Col>
                <Col span={8}>
                  <Input size="large" addonBefore="江宁江宁店" addonAfter="元" defaultValue="100" />
                </Col>
                <Col span={8}>
                  <Input size="large" addonBefore="江宁江宁店" addonAfter="元" defaultValue="100" />
                </Col>
                <Col span={8}>
                  <Input size="large" addonBefore="江宁江宁店" addonAfter="元" defaultValue="100" />
                </Col>
              </Row>
            </div>
          </div>,
      }, {
        key: '2',
        name:
          <div className="shejia-address">
            <div className="shejia-address-left"><span className="name">南京</span></div>
            <div className="add-cont">
              <Row gutter={16}>
                <Col span={6}>
                  <Input size="large"
                         addonBefore={
                           <Tooltip placement="topLeft" title="江宁店江宁店江宁店江宁店江宁店江宁店江宁店">
                             <span>江宁江宁店</span>
                           </Tooltip>
                         }
                         addonAfter="元" defaultValue="100" />
                </Col>
              </Row>
            </div>
          </div>,
      }
    ];
    const columns_qy = [
      {
        title: '区域商户设价',
        dataIndex: 'name',
        key: 'name',
      },{
        title: '操作',
        dataIndex: 'caozuo',
        key: 'caozuo',
        width:'100px',
        className: 'ant-table-th-center',
        render(){
          return(
            <div className="table-a-cont">
              <a href="#">批量设价</a>
            </div>
          )
        }
      }
    ];
    return (
      <div className="order-add">
        <div className="slip-title">
          <div className="slip-base">
            <div className="slip-left">
              <h4>新增</h4>
            </div>
          </div>
          <div className="slip-scroll">
            <a onClick={() => this.scrollToAnchor('components-anchor-base')} title="请填写雇主信息">基本信息</a>
            <a onClick={() => this.scrollToAnchor('components-anchor-family')} title="从业经历/家庭成员">从业经历/家庭成员</a>
            <a onClick={() => this.scrollToAnchor('components-anchor-picture-vedio')} title="阿姨相册视频信息">阿姨相册视频信息</a>
          </div>
        </div>
        <div className="slip-body" id="Test">
          {/*基本信息*/}
          <div className="slip-cont" id="components-anchor-base">
            <div className="slip-cont-title">
              <span className="span-bdw">基本信息</span>
            </div>
            <div className="slip-cont-b">
              <div className="add-cont">
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">新生儿护理</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <div className="btn-add-cont">
                      <div className="btn-hover">
                        <Button type="primary">乳腺速通</Button>
                        <div className="btn-hover-cont">
                          <a href="javascript:void(0)" className="btn-hover-link">编辑</a>
                          <a href="javascript:void(0)" className="btn-hover-link">删除</a>
                        </div>
                      </div>
                      <div className="btn-hover">
                        <Button type="primary">五行经络疏通</Button>
                        <div className="btn-hover-cont">
                          <a href="javascript:void(0)" className="btn-hover-link">编辑</a>
                          <a href="javascript:void(0)" className="btn-hover-link">删除</a>
                        </div>
                      </div>
                      <div className="btn-hover">
                        <Button type="primary">五行经络疏通</Button>
                        <div className="btn-hover-cont">
                          <a href="javascript:void(0)" className="btn-hover-link">编辑</a>
                          <a href="javascript:void(0)" className="btn-hover-link">删除</a>
                        </div>
                      </div>
                      <div className="btn-hover">
                        <Button type="primary">五行经络疏通</Button>
                        <div className="btn-hover-cont">
                          <a href="javascript:void(0)" className="btn-hover-link">编辑</a>
                          <a href="javascript:void(0)" className="btn-hover-link">删除</a>
                        </div>
                      </div>
                      <Button className="ant-btn-info" type=""><Icon type="plus" />新增选项值</Button>
                      <Button className="ant-btn-info dashed" type="" onClick={() => this.showModalEdit(true)}>编辑选项</Button>
                      <Modal
                        title="编辑选项"
                        wrapClassName="vertical-center-modal"
                        visible={this.state.ModalEdit}
                        onCancel={() => this.showModalEdit(false)}
                        okText="保存"
                        cancelText="取消"
                      >
                        <div className="add-cont">
                          <Row gutter={16}>
                            <Col span={5} className="text-r">
                              <div className="ant-form-item-label">
                                <label>选项名称</label>
                              </div>
                            </Col>
                            <Col span={10}>
                              <Input size="large" value="" placeholder="请输入选项名称"/>
                            </Col>
                          </Row>
                          <Row gutter={16}>
                            <Col span={5} className="text-r">
                              <div className="ant-form-item-label">
                                <label>选项类型</label>
                              </div>
                            </Col>
                            <Col span={19}>
                              <CheckBox data={Immutable.fromJS(data_leixing)}></CheckBox>
                            </Col>
                          </Row>
                          <Row gutter={16}>
                            <Col span={5} className="text-r">
                              <div className="ant-form-item-label">
                                <label>可否多选</label>
                              </div>
                            </Col>
                            <Col span={10}>
                              {/*<Switch checkedChildren="是" unCheckedChildren="否" defaultChecked/>*/}
                              <div className="ant-form-item-control">
                                <RadioGroup onChange={this.onChangeRadio} valueRadio={this.state.valueRadio}>
                                  <Radio value={1}>单选</Radio>
                                  <Radio value={2}>多选</Radio>
                                </RadioGroup>
                              </div>
                            </Col>
                          </Row>
                        </div>
                      </Modal>
                      <Button className="ant-btn-delete dashed" type="">删除选项</Button>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">现居地址</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <div className="ant-form-item-control">
                      <Input size="large" placeholder="请输入现居地址"/>
                    </div>
                  </Col>
                  <Col span={6}>
                    <div className="caozuo-cont">
                      <Button className="ant-btn-info dashed" type="">编辑选项</Button>
                      <Button className="ant-btn-delete dashed" type="">删除选项</Button>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">备注信息</span></label>
                    </div>
                  </Col>
                  <Col span={12}>
                    <div className="ant-form-item-control">
                      <div className="textarea-surplus">
                        <Input type="textarea" rows={6} placeholder="请输入其他 雇主和订单相关备注信息"/>
                        <p>还可以输入140字</p>
                      </div>
                    </div>
                  </Col>
                  <Col span={6}>
                    <div className="caozuo-cont">
                      <Button className="ant-btn-info dashed" type="">编辑选项</Button>
                      <Button className="ant-btn-delete dashed" type="">删除选项</Button>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label className="ant-form-item-required"><span className="span-left">联系电话</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <div className="ant-form-item-control">
                      <Input size="large" placeholder="请输入联系电话"/>
                    </div>
                  </Col>
                  <Col span={5}>
                    <div className="error-tip"><Icon type="minus-circle-o"/>请输入联系电话</div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">雇主姓名</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <div className="ant-form-item-control">
                      <Input size="large" placeholder="请输入雇主姓名"/>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">单选框</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <div className="ant-form-item-control">
                      <RadioGroup onChange={this.onChangeRadio} valueRadio={this.state.valueRadio}>
                        <Radio value={1}>A</Radio>
                        <Radio value={2}>B</Radio>
                        <Radio value={3}>C</Radio>
                        <Radio value={4}>D</Radio>
                      </RadioGroup>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">共享门店</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <div className="btn-hover">
                      <Button type="primary"><Icon type="plus"/>添加门店</Button>
                    </div>
                    <p className="tips-p mt5">该员工资料将共享给指定门店</p>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">共享门店</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <div className="btn-hover">
                      <Button type="primary">南京蔡红雨花分店</Button>
                      <div className="btn-hover-cont">
                        <a className="btn-hover-link" href="javascript:void(0)">编辑</a>
                        <a className="btn-hover-link" href="avascript:void(0)">删除</a>
                      </div>
                    </div>
                    <p className="tips-p mt5">该员工资料将共享给指定门店</p>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">复选框</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <div className="ant-form-item-control">
                      <CheckboxGroup options={plainOptions} defaultValue={['Apple']}/>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">阿姨头像</span></label>
                    </div>
                  </Col>
                  <Col span={16}>
                    <div className="ant-form-item-control">
                      <div className="clearfix">
                        <Upload
                          action=""
                          listType="picture-card"
                          fileList={fileList}
                          onPreview={this.handlePreview}
                          onChange={this.handleChange}
                        >
                          {fileList.length >= 1 ? null : uploadButton}
                        </Upload>
                        <Modal visible={previewVisible}
                               footer={null}
                               onCancel={this.handleCancel}
                        >
                          <img alt="example" style={{width: '100%'}} src={previewImage}/>
                        </Modal>
                      </div>
                      <p className="col-grey">尺寸2000*2000 不超过 200kb</p>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">服务地址</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <AddressSelect/>
                  </Col>
                  <Col span={5}>
                    <div className="input-deal">
                      <Input placeholder="详细街道地址" size="large" suffix={<Icon type="environment"/>}/>
                      <div className="deal-ul">
                        <ul>
                          <li>软件大道118号软件大道118号软件大道118号软件大道118号</li>
                          <li>软件大道118号</li>
                          <li>软件大道118号</li>
                          <li>软件大道118号</li>
                          <li>软件大道118号</li>
                          <li>软件大道118号</li>
                          <li>软件大道118号</li>
                          <li>软件大道118号</li>
                          <li>软件大道118号</li>
                          <li>软件大道118号</li>
                          <li>软件大道118号</li>
                          <li>软件大道118号</li>
                          <li>软件大道118号</li>
                          <li>软件大道118号</li>
                          <li>软件大道118号</li>
                        </ul>
                      </div>
                    </div>
                  </Col>
                  <Col span={5}>
                    <Input placeholder="详细地址，如楼层/门牌号" size="large"/>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">订单来源</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <div className="ant-form-item-control">
                      <Select defaultValue="选择订单来源" size="large">
                        <Option value="选择订单来源">选择订单来源</Option>
                      </Select>
                    </div>
                  </Col>
                  <Col span={5}>
                    <a className="col-blue add-cont-link" onClick={() => this.showModalOrderSource(true)}
                       href="javascript:void(0)">管理订单来源</a>
                    {/*弹窗--管理订单来源*/}
                    <Modal
                      title="管理订单来源"
                      wrapClassName="vertical-center-modal"
                      visible={this.state.ModalOrderSource}
                      onCancel={() => this.showModalOrderSource(false)}
                      footer={null}
                    >
                      <div className="ordersource-modal">
                        <Table bordered dataSource={dataOrderSource} columns={columns} pagination={false}/>
                        <div className="foot-add"><Button type="primary" icon="plus">新增来源</Button></div>
                      </div>
                    </Modal>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">饮食偏好</span></label>
                    </div>
                  </Col>
                  <Col className="ant-col-auto">
                    <CheckBox data={Immutable.fromJS(data_food)}></CheckBox>
                  </Col>
                  <Col span={5}>
                    <Input size="large" placeholder="请输入其他饮食偏好"/>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">饮食偏好</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <Row gutter={16}>
                      <Col className="ant-col-auto">
                        <CheckBox data={Immutable.fromJS(data_food2)}></CheckBox>
                      </Col>
                      <Col span={5}>
                        <div className="error-tip"><Icon type="minus-circle-o"/>错误提示</div>
                      </Col>
                    </Row>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">其他信息</span></label>
                    </div>
                  </Col>
                  <Col span={12}>
                    <div className="ant-form-item-control">
                      <div className="textarea-surplus">
                        <Input type="textarea" rows={6} placeholder="请输入其他 雇主和订单相关备注信息"/>
                        <p>还可以输入140字</p>
                      </div>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">用工时间</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <RangePicker size="large"/>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">宝宝性别</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <CheckBox data={Immutable.fromJS(data_sex)}></CheckBox>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">服务价格</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <div className="ant-form-item-control">
                      <Input size="large" placeholder="请输入愿意支付的心理价格"/>
                    </div>
                  </Col>
                  <Col span={2}><span className="danwei">元/月</span></Col>
                </Row>
              </div>
            </div>
          </div>
          {/*从业经历/家庭成员*/}
          <div className="slip-cont" id="components-anchor-family">
            <div className="slip-cont-title">
              <span className="span-bdw">从业经历/家庭成员</span>
            </div>
            <div className="slip-cont-b">
              <div className="add-cont">
                <div className="border-bom-dashed">
                  <ul>
                    <li>
                      <a href="#" className="col-red">删除</a>
                      <div className="info-text">
                        <Row gutter={16}>
                          <Col span={3} className="text-r">
                            <div className="ant-form-item-label">
                              <label><span className="span-left">姓名</span></label>
                            </div>
                          </Col>
                          <Col span={21}>
                            <div className="ant-form-item-control">
                              字段名
                            </div>
                          </Col>
                        </Row>
                        <Row gutter={16}>
                          <Col span={3} className="text-r">
                            <div className="ant-form-item-label">
                              <label><span className="span-left">关系</span></label>
                            </div>
                          </Col>
                          <Col span={21}>
                            <div className="ant-form-item-control">
                              字段名
                            </div>
                          </Col>
                        </Row>
                      </div>
                    </li>
                    <li>
                      <a href="#" className="col-red">删除</a>
                      <div className="info-text">
                        <Row gutter={16}>
                          <Col span={3} className="text-r">
                            <div className="ant-form-item-label">
                              <label><span className="span-left">姓名</span></label>
                            </div>
                          </Col>
                          <Col span={21}>
                            <div className="ant-form-item-control">
                              字段名
                            </div>
                          </Col>
                        </Row>
                        <Row gutter={16}>
                          <Col span={3} className="text-r">
                            <div className="ant-form-item-label">
                              <label><span className="span-left">关系</span></label>
                            </div>
                          </Col>
                          <Col span={21}>
                            <div className="ant-form-item-control">
                              字段名
                            </div>
                          </Col>
                        </Row>
                      </div>
                    </li>
                  </ul>
                </div>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label className="ant-form-item-required"><span className="span-left">姓名</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <div className="ant-form-item-control has-error">
                      <Input size="large" placeholder="请输入姓名"/>
                    </div>
                  </Col>
                  <Col span={5}>
                    <div className="error-tip"><Icon type="minus-circle-o"/>错误提示信息</div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">关系</span></label>
                    </div>
                  </Col>
                  <Col span={5}>
                    <div className="ant-form-item-control">
                      <Input size="large" placeholder="请输入关系"/>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label ant-form-item-label-empty">
                      <label><span className="span-left">&nbsp;</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <div className="ant-form-item-control">
                      <Button type="primary" icon="plus">添加</Button>
                    </div>
                  </Col>
                </Row>
              </div>
            </div>
          </div>
          {/*阿姨相册视频信息*/}
          <div className="slip-cont" id="components-anchor-picture-vedio">
            <div className="slip-cont-title">
              <span className="span-bdw">阿姨相册视频信息</span>
            </div>
            <div className="slip-cont-b">
              <div className="add-cont">
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">阿姨生活照</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <div className="ant-form-item-control">
                      <div className="clearfix">
                        <Upload
                          action=""
                          listType="picture-card"
                          fileList={fileList}
                          onPreview={this.handlePreview}
                          onChange={this.handleChange}
                        >
                          {fileList.length >= 4 ? null : uploadButton}
                        </Upload>
                        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                          <img alt="example" style={{width: '100%'}} src={previewImage}/>
                        </Modal>
                      </div>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">阿姨身份证照片</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <div className="ant-form-item-control">
                      <div className="clearfix">
                        <Upload
                          action=""
                          listType="picture-card"
                          fileList={fileList}
                          onPreview={this.handlePreview}
                          onChange={this.handleChange}
                        >
                          {fileList.length >= 2 ? null : uploadButton}
                        </Upload>
                        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                          <img alt="example" style={{width: '100%'}} src={previewImage}/>
                        </Modal>
                      </div>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">阿姨证件照</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <div className="ant-form-item-control">
                      <div className="clearfix">
                        <Upload
                          action=""
                          listType="picture-card"
                          fileList={fileList}
                          onPreview={this.handlePreview}
                          onChange={this.handleChange}
                        >
                          {fileList.length >= 4 ? null : uploadButton}
                        </Upload>
                        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                          <img alt="example" style={{width: '100%'}} src={previewImage}/>
                        </Modal>
                      </div>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">阿姨入职合同照</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <div className="ant-form-item-control">
                      <div className="clearfix">
                        <Upload
                          action=""
                          listType="picture-card"
                          fileList={fileList}
                          onPreview={this.handlePreview}
                          onChange={this.handleChange}
                        >
                          {fileList.length >= 4 ? null : uploadButton}
                        </Upload>
                        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                          <img alt="example" style={{width: '100%'}} src={previewImage}/>
                        </Modal>
                      </div>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">视频上传单独做</span></label>
                    </div>
                  </Col>
                  <Col span={21}>
                    <div className="ant-form-item-control">
                      <div className="clearfix">
                                                    <span className="">
                                                        <div className="ant-upload-list ant-upload-list-picture-card">
                                                            <div
                                                              className="ant-upload-list-item ant-upload-list-item-done">
                                                                <div className="ant-upload-list-item-info">
                                                                    <span>
                                                                        <a className="ant-upload-list-item-thumbnail">
                                                                            <img
                                                                              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                                                                              alt="xxx.png"/>
                                                                        </a>
                                                                        <a className="ant-upload-list-item-name"
                                                                           title="xxx.png">xxx.png</a>
                                                                    </span>
                                                                </div>
                                                                <span className="ant-upload-list-item-actions">
                                                                    <a title="预览文件">
                                                                        <i
                                                                          className="anticon anticon-play-circle-o"></i>
                                                                    </a>
                                                                    <i title="删除文件"
                                                                       className="anticon anticon-delete"></i>
                                                                </span>
                                                            </div>
                                                            <div
                                                              className="ant-upload-list-item ant-upload-list-item-done">
                                                              <div className="ant-upload-list-item-info">
                                                                <a className="ant-upload-list-item-thumbnail">
                                                                  <img
                                                                    src="//movie.qianmi.com/16b9a0d3-00fe-4151-a573-6f06abcc3c19.mp4?vframe/png/offset/1/w/150/h/150&amp;_v=1501825066915"
                                                                    alt="生活照"/>
                                                                </a>
                                                                <span className="ant-upload-list-item-name"
                                                                      title=""></span>
                                                              </div>
                                                              <span className="ant-upload-list-item-actions">
                                                                <a title="预览文件">
                                                                  <i className="anticon anticon-play-circle-o"></i>
                                                                </a>
                                                                <i title="删除文件"
                                                                   className="anticon anticon-delete">
                                                                </i>
                                                              </span>
                                                            </div>
                                                        </div>
                                                        <div
                                                          className="ant-upload ant-upload-select ant-upload-select-picture-card">
                                                            <span tabindex="0" className="ant-upload" role="button">
                                                                <input className="file-vedio" type="file" accept=""/>
                                                                <div>
                                                                    <i className="anticon anticon-upload"></i>
                                                                    <div className="ant-upload-text">上传</div>
                                                                </div>
                                                            </span>
                                                        </div>
                                                        <div
                                                          className="ant-upload ant-upload-select ant-upload-select-picture-card">
                                                            <span tabindex="0" className="ant-upload" role="button">
                                                                <input className="file-vedio" type="file" accept=""/>
                                                                <div>
                                                                    <i className="anticon anticon-upload"></i>
                                                                    <div className="ant-upload-text">上传</div>
                                                                </div>
                                                            </span>
                                                            <div className="jdt-bg">
                                                                <Progress type="circle" percent={70} width={40}/>
                                                            </div>
                                                        </div>
                                                        <div
                                                          className="ant-upload ant-upload-select ant-upload-select-picture-card">
                                                            <span tabindex="0" className="ant-upload" role="button">
                                                                <input className="file-vedio" type="file" accept=""/>
                                                                <div>
                                                                    <i className="anticon anticon-upload"></i>
                                                                    <div className="ant-upload-text">上传</div>
                                                                </div>
                                                            </span>
                                                            <div className="jdt-bg">
                                                                <Progress type="circle" percent={100} width={40}/>
                                                            </div>
                                                        </div>
                                                    </span>
                      </div>
                      <Modal
                        title="视频预览"
                        wrapClassName="vertical-center-modal"
                        visible={this.state.Modalvideo}
                        onCancel={() => this.showModalvideo(false)}
                        footer={null}
                      >
                        <video className="video" width='100%' height='100%' controls="controls"
                               src="http://movie.qianmi.com/c77f3875-be2b-4634-928e-73e51ec4d788.mp4"></video>
                      </Modal>
                    </div>
                  </Col>
                </Row>
              </div>
            </div>
          </div>
          {/*区域设价*/}
          <div className="slip-cont">
            <div className="slip-cont-title">
              <span className="span-bdw">区域设价</span>
              <span className="slip-bdt">
                <Button type="primary">添加</Button>
              </span>
            </div>
            <div className="slip-cont-b">
              <Table dataSource={dataSource_qy} bordered columns={columns_qy}/>
            </div>
          </div>
          {/*子商品一*/}
          <div className="slip-cont">
            <div className="slip-cont-title">
              <span className="span-bdw">商品信息</span>
            </div>
            <div className="slip-cont-b">
              <div className="good-child-cont">
                <Card title="子商品一" noHovering={true} extra={<a className="col-red" href="#">删除</a>}>
                  <div className="add-cont">
                    <Row gutter={16}>
                      <Col span={3} className="text-r">
                        <div className="ant-form-item-label">
                          <label>商品名称</label>
                        </div>
                      </Col>
                      <Col span={21}>
                        <Row>
                          <Col span={5}>
                            <div className="ant-form-item-control">
                              <Input size="large" placeholder="请输入商品名称"/>
                            </div>
                          </Col>
                        </Row>
                        <div className="ant-form-item-control">
                          <p className="tips-p">10个字以内，不超过5个字展示最佳</p>
                        </div>
                      </Col>
                    </Row>
                    <Row gutter={16}>
                      <Col span={3} className="text-r">
                        <div className="ant-form-item-label">
                          <label>区域设价</label>
                        </div>
                      </Col>
                      <Col span={21}>
                        <Table dataSource={dataSource_qy2} bordered columns={columns_qy}/>
                      </Col>
                    </Row>
                  </div>
                </Card>
              </div>
              <Button type="primary"><Icon type="plus"/>添加子商品</Button>
            </div>
          </div>
        </div>
        <div className="slip-footer">
          <div className="slip-foot-center" id="slipFootCenter">
            <Button type="primary" htmlType="submit">保存</Button>
          </div>
        </div>
      </div>
    )
  }
}